<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS Slider - Template</title>
    <link rel="stylesheet" href="./themes/csslider.default.css" />
    <style>
        html, body {
            margin: 0;
            padding: 100px 0 0 0;
            font: 400 100% arial, sans-serif;
            color: white;
            background: #282828;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="csslider">
        <input type="radio" name="slides" id="slides_1" checked />
        <input type="radio" name="slides" id="slides_2" />
        <input type="radio" name="slides" id="slides_3" />
        <input type="radio" name="slides" id="slides_4" />
        <input type="radio" name="slides" id="slides_N" />
        <ul>
            <li>Content of slide 1</li>
            <li>Content of slide 2</li>
            <li>Content of slide 3</li>
            <li>Content of slide 4</li>
            <li>Content of slide 5</li>
        </ul>
        <div class="arrows">
            <label for="slides_1"></label>
            <label for="slides_2"></label>
            <label for="slides_3"></label>
            <label for="slides_4"></label>
            <label for="slides_N"></label>
        </div>
        <div class="navigation">
            <div>
                <label for="slides_1"></label>
                <label for="slides_2"></label>
                <label for="slides_3"></label>
                <label for="slides_4"></label>
                <label for="slides_N"></label>
            </div>
        </div>
    </div>
</body>
</html>
